<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title> 任务六：通过HTML及CSS模拟报纸排版 </title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>

	<header>
		<h1 class="logo"> </h1>
		<span> 2016.9.18 </span>
	</header>

	<section class="section_about">
		<section class="section_img">
			<img class="section_about_img_first" src="../img/default_img.png" alt=" ">
			<img class="section_about_img_second" src="../img/default_img.png" alt=" ">
		</section>
		<aside class="aside_about">
			<u class="about_title">About Technologe</u> <br>
			<i class="about_des"> About techonologe About techonologe About techonologe </i> 
			<span class="about_num"> 700 </span>
			<span class="about_banben"> 3.2 </span>
			<p class="about_css_info"><span class="about_css"> CSS </span><br>
				<span class="about_css_des"> cssssccsccsccsss </span>
			</p>
		</aside>
	</section>

	<section class="section_3w"> 
		<article class="what">
			<u> What </u>
			<p> 端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端 </p>
		</article>

		<article class="when">
			<u> when </u>
			<p> 端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端 </p>
		</article>

		<article class="how">
			<u> how </u>
			<p> 端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端 </p>
			<br><br><br>
			<p> what--------<span class="section_3w_per">40%</span> </p>
			<p> what--------<span class="section_3w_per">30%</span> </p>
			<p> what--------<span class="section_3w_per">30%</span> </p>
		</article>
	</section>

	<section class="section_front">
		<h3><span class="the">THE</span> TECHNOLOGE OF FRONT <br> <span>前端技术领域</span></h3>
		<p class="p_first"><span>前</span>端前端前端前前端前端前端前前端前端前端前前端前端前端前前端前端前端前前端前端前端前前端前端前端前前端前端前端前前端前端前端前前端前端前端前前端前端前端前前端前端前端前前端前端前端前前端前端前端前前端前端前端前前端前端前端前前端前端前端前前端前端前端前前端前端前端前<img src="../img/default_img.png" alt="">前端前端前端前端前端前前端前端前端前前端前端前端前端前端前前端前端前端前前端前端前端前端前端前前端前端前端前前端前端前端前端前端前前端前端前端前前端前端前端前端前端前前端前端前端前前端前端前端前端前端前前端前端前端前前端前端前端前端前端前前端前端前端前前端前端前端前端前端前前端前端前端前前端前端前端前端前前端前端前端前端。<br></p>
		<p class="p_second">前端前端前端前前端前端前端前前端前端前端前端前端前前端前端前端前前端前端前端前端前端前前端前端前端前前端前端前端前端前端前前端前端前端前前端前端前端前端前端前前端前端前端前前端前端前端前端前端前前端前端前端前前端前端前端前端前端前前端前端前端前前端前端前端前端前端前前端前端前端前前端前端前端前端前端前前端前端前端前前端前端前端前端前端前前端前端前端前前端前端前端前端前端前前端前端前端前前端</p>
		<p class="p_third">前端前端前端前前端前端前端前前端前端前端前端前端前前端前端前端前前端前端前端前端前前端前端前端前前端前端前端前端前端前前端前端前端前</p>
	</section>

	<section class="section_right">
		<div class="right_bg">
			<div class="right_title_bg">
				<div class="right_title">
					<p> 前端技术学院 <span>前端技术前端技术</span> </p>
				</div>
			</div>
		</div>
		<div class="section_right_info">
			<ul>
				<li> 前端前端前端前端前端前端 ..................<span>前端</span></p> </li>
				<li> 前端前端前端前端 ........................<span>前端端</span></p> </li>
				<li> 前端前端前端前端前端前端前端 ..............<span>前端</span></p> </li>
			</ul>

			<div class="section_right_info_0">
				<div class="title_0"> 0 </div>
				<div class="title_0_des">
					<p> ONE TWO<br> THREE FORTH FIVE <span> hello world hello world hello world </span> </p>
				</div>
			</div>

			<div class="section_right_bottom">
				<span class="assign_0">“</span>hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world <span class="assign_1">”</span>
			</div>
		</div>
		
	</section>

</body>
</html>